import React, { useEffect, useState, } from "react";
import { Link } from "react-router-dom";
import "../../../../assest/style/font/iconfont.css";
import "./pay.css";
import { useNavigate, useLocation } from "react-router"

import * as api from 'api/index'

function Pay() {
  const navigate = useNavigate()
  const location = useLocation()
  console.log('@', location);
  console.log("@@@", location.state.username);
  //选择第一天和最后一天
  const first = location.state.date[0]
  const lg = location.state.date.length
  const end = location.state.date[lg - 1]
  let [render, setRender] = useState([])
  const postRender = () => {
    let params = {
      id: location.state.id
    }
    api.houseDetail(params).then((res) => {
      setRender(res.result)
      console.log(res);
    })
  }
  useEffect(postRender, [])

  // 提交订单请求 to = '/order/list'
  let [orderList, setorderList] = useState([])
  const payorderAdd = () => {
    let params = {
      houseId: location.state.id,
      username: location.state.username,
      phone: location.state.phone,
      totalMoney: location.state.totalMoney,
      realMoney: location.state.realMoney,
      startDate: location.state.startDate,
      endDate: location.state.endDate,
    }
    api.orderAdd(params).then((res) => {
      console.log(res);
    })
    { navigate("/order/list") }
  }
  useEffect(setorderList, [])
  return (
    <div className="pay app">
      {/* 头部 */}
      <div className="pay-header flex bg-fff pd-10">
        <img id="pay-img"
          src={render.imageUrl}
          alt=""
        />
        <p className="headLeft flex fdc f16 ml-10">
          <span className="title-text mt-5">{render.name}</span>
          <br />
          <span className="f999 f14">住离日期：{first}-{end}</span>
          <span></span>
        </p>
      </div>
      {/* 用户信息 */}
      <div className="user-Info bg-fff mt-10 f999 flex fdc jc-sa">
        <p className="flex jc-sb">
          <span>预定姓名：</span>
          <span>{location.state.username}</span>
        </p>
        <p className="flex jc-sb">
          <span>预定电话：</span>
          <span>{location.state.phone}</span>
        </p>
      </div>
      {/* 支付金额 */}
      <div className="pay-Info bg-fff mt-10 f999 flex fdc jc-sa">
        <p className="flex jc-sb">
          <span>订单金额：</span>
          <span>&yen;{location.state.payMoney.reduce(function (sum, item, index) {
            return sum * 1 + item * 1
          }, 0)}</span>
        </p>
        <p className="payed flex jc-sb">
          <span>实付金额：</span>
          <span>&yen;{location.state.payMoney.reduce(function (sum, item, index) {
            return sum * 1 + item * 1
          }, 0)}</span>
        </p>
      </div>
      {/* 选择支付方式 */}
      <div className="payway">
        <p className="payway-title bg-fff mt-10 flex aic">
          <span className="line mr-5"></span>
          <span>支付方式</span>
        </p>
        <div className="choose-payway bg-fff flex aic">
          <i className="icon mr-5 iconfont icon-v1"></i>
          <span className="flex aic jc-sb w100pc">
            <span>支付宝支付</span>
            <i className="icon1 iconfont icon-iconfontyoujiantou-copy-copy-copy-copy"></i>
          </span>
        </div>
      </div>
      {/* 底部 */}
      <footer className="bg-fff fixed  flex aic jc-sb w100pc">
        <span className="pl-10">
          <span>应付金额：</span>
          <span className="money pl-10">&yen;{location.state.payMoney.reduce(function (sum, item, index) {
            return sum * 1 + item * 1
          }, 0)}</span>
        </span>
        <div onClick={payorderAdd} className="gopay flex aic jc-c">立即支付</div>
      </footer>
    </div>
  );
}

export default Pay;
